import CardItem from '../components/CardItem';
import React, { useEffect, useState } from 'react'
import { message, Button } from 'antd';
import {
    apigetIdentityList,
    apiAddIdentityList,
    apiAddUserList,
    apieditIdentityAuth
} from '../api'

// 下拉菜单

const AddUser = () => {
    const [identityList, setIdentity] = useState([])

    useEffect(() => {
        getIdentityList()
    }, [])

    // 添加用户
    const itemList = [
        {
            label: '请输入用户名称',
            name: 'name',
            type: "Input"
        },
        {
            label: '请输入账号名称',
            name: 'username',
            type: 'Input',
        },
        {
            label: '请输入密码',
            name: 'password',
            type: 'Input',
        },
        {
            label: '请选择身份',
            name: 'Identity',
            type: 'Select',
            option: identityList.map(item => {
                return {
                    value: item.id,
                    label: item.name
                }
            })
        }
    ]

    // 添加身份
    const addIds = [
        {
            type: 'Input',
            label: '请选输入身份名称',
            name: 'username',

        }
    ]

    // 给身份设置视图权限
    const setAuthList = [
        {
            type: "Select",
            label: '请选择身份',
            name: 'username',
            option: identityList.map(item => {
                return {
                    value: item.id,
                    label: item.name
                }
            })
        },
        {
            type: "Select",
            label: '请选择视图权限',
            name: 'viewAuth',
            mode: 'multiple',
            option: [
                {
                    label: '查看试题',
                    value: '100'
                },
                {
                    label: '添加试题',
                    value: '101'
                },
                {
                    label: '添加用户',
                    value: '102'
                }
            ]
        }
    ]

    // 获取身份列表
    const getIdentityList = () => {
        apigetIdentityList().then(res => {
            setIdentity(res.data)
        })
    }

    // 添加用户
    const getAddUserInfo = (data) => {
        // data: 输入框中输入的内容
        apiAddUserList(data).then(res => {
            message.success('添加成功')
        })
    }

    // 添加身份
    const getAddIs = (data) => {
        apiAddIdentityList(data).then(res => {
            // 重新获取身份列表
            getIdentityList()
        })
    }

    // 给身份添加权限
    const getSetAuthList = (data) => {
        apieditIdentityAuth(data).then(res => {
            // 更改完权限后 要刷新页面 重新分配权限
            window.location.href = '/home/addUser'
        })
    }

    return <div>

        {/* getCardInfo: 为自定义组件 提供的 获取表单内容的方法 */}
        <CardItem itemList={itemList} title="添加用户" getCardInfo={getAddUserInfo} />

        <CardItem itemList={addIds} title="添加身份" getCardInfo={getAddIs} />

        <CardItem itemList={setAuthList} title="给身份设置视图权限" getCardInfo={getSetAuthList} />


    </div>
}

export default AddUser